import React from 'react'
import { changeNav,getGroupdetail,getStoredetail,getGroupopened,getStoreopened ,getServiceinfo,getArea,
    getProvince,modifyServicer,getCity,getRegion} from '../../actions'
import { connect } from 'react-redux'
import { List,Tabs,InputItem,WhiteSpace,Button,WingBlank,Icon,Picker,Toast } from 'antd-mobile'
import hhistory from '../../history'
import { ajaxGet,ajaxPost,ajaxDelect ,ajaxPut} from '../../common/jsajaxservice.js'
import { createForm } from 'rc-form'
const TabPane = Tabs.TabPane;

const Item = List.Item
const Brief = Item.Brief

var urldata = ""

class GroupDetail extends React.Component {
    constructor( props ){
        super( props )
        console.log(this.props)
        this.state = {
            status:1,
            urlId:0,
            urlType:''
        }

    }
    componentWillMount(){
        urldata = this.props.params.type.split("_")
        this.setState({
            urlId:urldata[1],
            urlType:urldata[0]
        })
            this.props.tochangeNav({title:"门店详情"})
            this.props.getStoredetail( urldata[1] )
            this.props.getStoreopened( urldata[1] )
    }
    componentWillReceiveProps(nextprops){
        this.setState({
            status:nextprops.groupDetail.statusGroup,
        })
    }
    toggleUsedType() {
        let type = this.state.status?1:0;
        let that = this;
        // let data = {
        //     storeName:this.props.groupDetail.storeName,
        //     groupCode:this.props.groupDetail.groupCode,
        //     servicerCode:this.props.groupDetail.servicerCode,
        //     fullname:this.props.groupDetail.fullname,
        //     mobile:this.props.groupDetail.mobile,
        //     email:this.props.groupDetail.email,
        //     status:type
        // }
        let data = this.props.groupDetail
        data.status = type;
        ajaxPut( "/bd/store/"+ this.state.urlId,data).then((res) => {console.log(res)
            that.setState({
                status:!this.state.status
            })
        })
    }
    reviseInfo(){
        sessionStorage.setItem('stortdetail',JSON.stringify(this.props.groupDetail));
        hhistory.push('/storePush')
    }
    render(){
        const { groupDetail,alreadyOpened,params} = this.props
        const { getFieldProps} = this.props.form
        return(
            <div className='groupDetail'>
                <List>
                    <Item
                        thumb={
                            <img style={{ width:"1.2rem",height:"1.2rem",margin:'0.4rem 0.1rem' }} src={
                                groupDetail.groupLogo ? groupDetail.groupLogo : "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                            }/>
                        }
                        arrow="empty"
                    >
                        { groupDetail.storeName }
                        <Brief>
                            <p style={{color:"#a4a4a4",fontSize:"0.3rem"}}>{groupDetail.groupShortName}</p>
                            <p style={{color:"#a4a4a4",fontSize:"0.26rem"}}><Icon style={{width:'0.3rem',marginBottom:'-0.12rem'}} type={require('./../../components/assets/icon_gg_bianhao.svg')}></Icon>  {groupDetail.groupCode}</p>
                        </Brief>
                    </Item>
                </List>

                <Tabs  defaultActiveKey="1" onChange={()=>{}} onTabClick={()=>{}}>
                    <TabPane tab={<div><Icon style={{width:'0.3rem',marginBottom:'-0.12rem'}} type={require('./../../components/assets/icon_sh_xq_jichudangan.svg')}></Icon>  基础档案</div>} key="1">
                        <WhiteSpace></WhiteSpace>
                        <List renderHeader={() => '联系方式'}>
                            <InputItem
                                value={groupDetail.fullname}
                            >联系人：</InputItem>
                            <InputItem
                                value = {groupDetail.mobile}
                            >手机号：</InputItem>
                            <InputItem
                                value = {groupDetail.email}
                                placeholder={'请填写邮箱'}
                            >邮箱：</InputItem>
                        </List>
                        <WhiteSpace></WhiteSpace>
                        <List renderHeader={() => '集团地址'}>
                            <InputItem
                                editable={true}
                                value={groupDetail.areaName}
                            >所属大区：</InputItem>
                            <InputItem
                                editable={true}
                                value={groupDetail.provinceName+groupDetail.cityName+groupDetail.regionName}
                            >所在地址：</InputItem>
                            <InputItem
                            editable={true}
                            {...getFieldProps('address',{
                                initialValue:groupDetail.address,
                                rules: [{required: true}]
                            })}
                        >街道地址：</InputItem>
                            <InputItem
                                editable={true}
                                value={groupDetail.manageAcreage+' ㎡'}
                            >街道地址：</InputItem>
                            <InputItem
                                editable={true}
                                {...getFieldProps('remark',{
                                    initialValue:groupDetail.remark
                                })}
                                placeholder={'备注'}
                            >备注：</InputItem>
                        </List>
                        <div style={{marginTop:'0.4rem',background:'#fff',width:'100%',height:'1.6rem',padding:'0.4rem 0'}}>
                            <Button onClick={this.toggleUsedType.bind(this)} style={{border:'0.01rem solid #FD8900',width:'40%',height:'0.9rem',color:'#FD8900',fontSize:'0.32rem',lineHeight:'0.85rem',float:'left',marginLeft:'0.38rem'}}>
                                {this.state.status?"关闭":"开启"}
                            </Button>
                            <Button style={{background:'#FD8900',width:'40%',height:'0.9rem',color:'#fff',fontSize:'0.32rem',lineHeight:'0.85rem',float:'right',marginRight:'0.38rem'}}
                                    onClick={this.reviseInfo.bind(this)}>编辑</Button>
                        </div>
                    </TabPane>
                    <TabPane tab={<div><Icon style={{width:'0.3rem',marginBottom:'-0.12rem'}} type={require('./../../components/assets/icon_sh_xq_yikaitong.svg')}></Icon>  基础档案</div>}  key="2">
                        <WhiteSpace></WhiteSpace>
                        <List style={{display:alreadyOpened.length == 0?'none':'block',}} renderHeader={() => '已开通产品'}>
                            {
                                alreadyOpened.map( ( item,i ) => {
                                    return (
                                        <Item
                                            style={{paddingRight:'0 !important'}}
                                            key={i}
                                            arrow="horizontal"
                                            thumb={
                                                <img style={{ width:"0.9rem",height:"0.9rem",margin:'0.15rem 0.1rem' }} src={
                                                    item.productUrl ? item.productUrl : "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                                                }/>
                                            }
                                            onClick={() => {

                                                hhistory.push( '/abDetail/' + params.type )

                                            }}
                                        >
                                            <p style={{color:'#333',fontSize:'0.28rem'}}>{ item.productName }</p><p style={{color:"#a4a4a4",fontSize:'0.26rem'}}>{ item.productCode }</p>
                                            {/*<Brief></Brief>*/}
                                        </Item>
                                    )
                                } )
                            }
                            <WhiteSpace></WhiteSpace>

                        </List>
                        <WhiteSpace size="xl" />

                        <Button
                            style={{margin:'0',color:'#fff',background:'#FFC37D',borderRadius:'0'}}
                            className="btn" onClick={ ()=>{ hhistory.push('/tenantBind') } }>
                            + 绑定已有产品/业务账号
                        </Button>


                    </TabPane>
                </Tabs>

            </div>
        )
    }

}

const mapStateToProps = ( state ) => ({
    groupDetail:state.groupDetail,
    alreadyOpened:state.alreadyOpened,
    locationInfo:state.locationInfo
    // storeDetail:state.storeDetail
})

const mapDispatchToProps = (dispatch) => ({
    tochangeNav:navobj => dispatch( changeNav( navobj ) ),
    getGroupdetail:groupcode => dispatch( getGroupdetail( groupcode ) ),
    getStoredetail:storecode => dispatch( getStoredetail( storecode ) ),
    getGroupopened:groupcode => dispatch( getGroupopened( groupcode ) ),
    getStoreopened:storecode => dispatch( getStoreopened( storecode ) ),
    getProvince:() => dispatch( getProvince() ),
    getCity:code => dispatch( getCity(code) ),
    getRegion:code => dispatch( getRegion(code) )
})

export default createForm()(connect( mapStateToProps,mapDispatchToProps )( GroupDetail ))